<template>
  <div class="main">
    <div style="width:100%;">
      <div>
        <img src="../../../assets/img/ParkAerialView.jpg" alt="" width="100%">
      </div>
      <div style="margin-top: 20px;margin-left: 20px;">
        <el-select
          style="width: 150px;margin-bottom: 20px;"
          placeholder="请选择区域"
          v-model="selectCity"
          @change="cityChange">
          <el-option v-for="item in cityList" :key="item.cityCode" :label="item.cityName" :value="item.cityCode">
          </el-option>
        </el-select>
        <el-select
          v-model="selectPark"
          filterable
          placeholder="请选择园区"
          style="margin-left: 20px;"
          @change="parkChange">
          <div slot="prefix">
            <i class="el-icon-search" style="font-size:18px;line-height: 40px;margin-left: 3px;"></i>
          </div>
          <el-option v-for="item in parkSelectList" :key="item.parkCode" :label="item.nameAbbreviation" :value="item.parkCode" :disabled="item.disabled">
          </el-option>
        </el-select>
      </div>
      <div style="padding-left: 20px;">
        <div
          v-for="item in parkListShow"
          :key="item.parkCode"
          @click="toVideoUrl(item.videoPageUrl)"
          style="width: 256px;height: 300px;border-radius: 4px;box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);border: 1px solid #F0F0F0;float: left;margin-right: 20px;margin-bottom: 20px;">
          <img :src="item.imgUrl" alt="" width="254px" height="254px">
          <div style="text-align: center;margin-top: 5px;">{{item.nameAbbreviation}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'zfParkAerialView',
  data () {
    return {
      selectCity: '',
      selectPark: '',
      cityList: [],
      parkList: [],
      parkSelectList: [],
      parkListShow: [],
      page: 0
    }
  },
  mounted () {
    this.getCityList()
    this.getParkList()
    let _this = this
    window.onscroll = function () {
      // 变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 变量windowHeight是可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
      // 变量scrollHeight是滚动条的总高度
      var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
      // 滚动条到底部的条件
      if (scrollTop + windowHeight >= scrollHeight && _this.page < 3) {
        _this.parkPageChange()
      }
    }
  },
  methods: {
    getCityList () {
      this.$http.post(`/home/chemical/parkInfoGovPage/getParkEagleEyeCity`, {}
      ).then(({ data: res }) => {
        if (res && res.code === 0) {
          this.cityList = res.data
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    getParkList () {
      this.$http.post(`/home/chemical/parkInfoGovPage/getParkEagleEyeParkDetailByCity`, {}
      ).then(({ data: res }) => {
        if (res && res.code === 0) {
          let parkArr = []
          let parkFirst = []
          res.data.forEach(item => {
            if (item.videoPageUrl) {
              parkFirst.push(
                {
                  cityCode: item.cityCode,
                  parkCode: item.parkCode,
                  parkName: item.parkName,
                  nameAbbreviation: item.nameAbbreviation,
                  disabled: item.valid !== 1,
                  videoPageUrl: item.videoPageUrl,
                  imgUrl: item.baseUrl + '/' + item.objectName
                }
              )
            } else {
              parkArr.push(
                {
                  cityCode: item.cityCode,
                  parkCode: item.parkCode,
                  parkName: item.parkName,
                  nameAbbreviation: item.nameAbbreviation,
                  disabled: item.valid !== 1,
                  videoPageUrl: item.videoPageUrl,
                  imgUrl: item.baseUrl + '/' + item.objectName
                }
              )
            }
          })
          this.parkList = [...parkFirst, ...parkArr]
          this.parkSelectList = parkArr
          this.parkListShow = this.parkList.slice(0, 15)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    cityChange (cityCode) {
      this.parkSelectList = this.parkList.filter(item => {
        return item.cityCode === cityCode
      })
      this.page = 0
      this.selectPark = ''
      this.parkListShow = this.parkSelectList.slice(0, 15)
    },
    parkChange (parkCode) {
      this.page = 0
      this.parkListShow = this.parkList.filter(item => {
        return item.parkCode === parkCode
      })
    },
    parkPageChange () {
      this.page = this.page + 1
      let nextPageList = this.parkSelectList.slice(this.page * 15, (this.page + 1) * 15)
      this.parkListShow = this.parkListShow.concat(nextPageList)
    },
    toVideoUrl (url) {
      if (url) {
        // this.$router.push({
        //   name: 'commandCentre',
        //   params: {
        //     url: url
        //   }
        // })
        window.open(url)
      } else {
        this.$message({
          message: '暂无视频',
          type: 'warning'
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  padding: 20px 20px 40px 20px;
}
</style>
